<script setup>
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus'
import { adminLogin } from '@/api/admin'
import { useRouter } from 'vue-router';
const adminname = ref('');
const password = ref('');

const router = useRouter(); 

// 按钮是否可点
const flag = computed(() => {
  return adminname.value === '' || password.value === '';
});

const login = () => {
  adminLogin({
    email: adminname.value,
    password: password.value
  }).then(res => {
    console.log(res)
    if (res.data.code === 1005) {
      console.log('账户未注册')
      ElMessage.error('账户未注册.')
    } else if (res.data.code === 1003) {
      ElMessage.warning('密码错误')
    } else if (res.data.code === 200) {
      ElMessage.success('登录成功')
      // 将登陆信息保存到本地
      console.log(res.data.data)
      localStorage.setItem('Authorization', res.data.data) // 保存 token
      router.replace('/')
    } else {
      ElMessage.error('未知错误')
    }
  })
}

</script>

<template>
  <div class="loginBox">
    <div class="loginForm">
      <div class="loginTitle">家庭财务管理系统后台</div>
      <div class="loginInput">
        <el-input v-model="adminname" placeholder="管理员账户" clearable prefix-icon="User"/>
      </div>
      <div class="loginInput">
        <el-input type="password" v-model="password" clearable placeholder="管理员密码" show-password prefix-icon="Lock"/>
      </div>
      <el-button type="primary"  @click="login" :disabled="flag" class="loginBtn">登录</el-button>
    </div>
  </div>
</template>

<style lang="scss">
.loginBox {
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #f4e1d2, #ff9a8b); /* 亮色渐变背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333;  /* 文字颜色调整为深色 */

  .loginForm {
    width: 400px;
    padding: 40px;
    background-color: rgba(255, 255, 255, 0.8); /* 更亮的半透明背景 */
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* 调整阴影效果 */
    backdrop-filter: blur(10px);

    .loginTitle {
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 30px;
      color: #333; /* 标题颜色 */
    }

    .loginInput {
      margin: 20px 0;

      .el-input {
        height: 40px;

        .el-input__wrapper {
          background-color: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 5px;

          .el-input__inner {
            background-color: transparent;
            color: #333; /* 输入框文字颜色为深色 */

            &::placeholder {
              color: rgba(0, 0, 0, 0.5);
            }
          }

          &:hover {
            border-color: rgba(255, 255, 255, 0.5);
          }

          &:focus {
            border-color: #409EFF;
          }
        }
      }
    }

    .loginBtn {
      width: 100%;
      height: 40px;
      margin-top: 20px;
      background-color: #409EFF;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      font-weight: bold;
      transition: background-color 0.3s ease;

      &:hover {
        background-color: #66b1ff;
      }

      &:disabled {
        background-color: #66b1ff;
        opacity: 0.7;
        cursor: not-allowed;
      }
    }


  }
}
</style>
